import { configureStore } from '@reduxjs/toolkit';
import { useDispatch } from 'react-redux';
import logger from 'redux-logger';
import createSagaMiddleware from 'redux-saga';
import { activenessReducer } from './libs/slices/activenessSlice';
import { chartReducer } from './libs/slices/chartManagerSlice';
import { filterReducer } from './libs/slices/filterSlice';
import { pageReducer } from './libs/slices/pageSlice';
import rootSaga from './saga';
/**
 * A friendly abstraction over the standard Redux createStore function
 * that adds good defaults to the store setup for a better development experience.
 * For more details, please visit
 *  - https://redux-toolkit.js.org/api/configureStore
 *  - https://redux-toolkit.js.org/usage/usage-with-typescript
 */
const sagaMiddleware = createSagaMiddleware();

export const store = configureStore({
  reducer: {
    activeness: activenessReducer,
    filter: filterReducer,
    chart: chartReducer,
    page: pageReducer,
  },

  devTools: process.env.NODE_ENV !== 'production',
  middleware: getDefaultMiddleware =>
    process.env.NODE_ENV === 'production'
      ? getDefaultMiddleware().prepend(sagaMiddleware)
      : getDefaultMiddleware().prepend(sagaMiddleware).concat(logger),
});

/**
 * Need to add saga here,
 * store.sagaTask = sagaMiddleware.run(rootSaga)
 * For more details, please visit
 * -  https://redux-saga.js.org/docs/introduction/BeginnerTutorial
 */
sagaMiddleware.run(rootSaga);

export type AppDispatch = typeof store.dispatch;

export const useAppDispatch = () => useDispatch<AppDispatch>(); // Export a hook that can be reused to resolve types

export type RootState = ReturnType<typeof store.getState>;
